<template>
    <el-aside width="200px"  style="background-color: #263238;display: block;">
      <div class="info">
        <a href="#" class="avatar-box">
          <el-image :src= "imageSrc"></el-image>
        </a>
        <p>{{ message }},欢迎回来</p>
      </div>
      <el-menu  background-color="#263238" text-color="#fff" active-text-color="#fff"  router>
         <el-sub-menu index="1">
          <template #title>
            <el-icon><UserFilled /></el-icon>
            <span>用户信息管理</span>
          </template>
          <el-menu-item index="/teacher"><el-icon><User /></el-icon>教师管理</el-menu-item>
          <el-menu-item index="/student"><el-icon><User /></el-icon>学生管理</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="2">
          <template #title>
            <el-icon><School /></el-icon>
            <span>学校管理</span>
          </template>
          <el-menu-item index="/school"><el-icon><User /></el-icon>学校信息列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Money /></el-icon>
            <span>课程管理</span>
          </template>
          <el-menu-item index="/course"> <el-icon><Notebook /></el-icon>课程列表</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><ChatLineRound /></el-icon>
            <span>交流模块</span>
          </template>
          <el-menu-item index="/post"> <el-icon><Message /></el-icon>贴吧列表</el-menu-item>
        </el-sub-menu>
         </el-menu>
         </el-aside>
</template>
<script setup>
import {onMounted, ref} from "vue";
import axios from "axios";
import ikunImage from '../assets/ikun.png';
import userApi from '../api/public/public.js'
import request from "../utils/request";
let message=ref("admin");
let imageSrc=ref(ikunImage);
onMounted(()=>{
  changeImageAndMessage()

})
function changeImageAndMessage() {
  userApi.getInfoById().then(response => {
    imageSrc.value = response.data.data.data.avatar;
    message.value = response.data.data.data.name;
    // console.log("头像修改：response=", response);
    // console.log("头像修改：imageSrc=", imageSrc.value);
    // console.log("头像修改：message=", message.value);
  })
}

</script>
<style lang="scss" scoped>
.info{
  margin-top:50px;
  margin-bottom: 20px;
}
.info p{
  text-align: center;
  color: #fff;
  font-size: 12px;
}
   .avatar-box {
    display: block;
      margin: 0 auto;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      border: 1px solid #409eff;
      box-shadow: 0 0 10px #409eff;
      position: relative;
      bottom: 20px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
</style>